<template>
  <div class="piechart">
    <div @click="onclck" class="piechart-icon">
      <Icon size="17" type="ios-download-outline" />
    </div>
    <div id="container" ref="container" style="width: 355px; height:  350px;"></div>
  </div>
</template>

<script>
var myChart;
import { getApiBasicGetDishAttributeValue } from "@/api/business/manager";
import * as echarts from "echarts";
export default {
  components: {},
  name: "piechart",
  data() {
    return {
      data: [
        // { value: 33.3, name: "蛋白质" },
        //         { value: 33.3, name: "脂肪" },
        //         { value: 33.3, name: "糖" },
      ]
    };
  },
  props: {
    nutrition: {
      type: Array,
      default() {
        return [
          { value: 33.3, name: "蛋白质" },
          { value: 33.3, name: "脂肪" },
          { value: 33.3, name: "糖" }
        ];
      }
    }
  },
  created() {
    console.log("1111");
  },
  mounted() {},
  methods: {
    myChart(nutrition = []) {
      myChart = echarts.init(this.$refs.container);
      console.log("echarts-----", this.data);
      //1.echarts初始化。

      //2.设置图表配置项
      // 绘制图表
      var option;
      option = {
        legend: {
          orient: "vertical",
          left: 10,
          top: 10,
          bottom: 20
        },
        tooltip: {
          trigger: "item"
        },
        saveAsImage: {
          show: true,
          pixelRatio: 1,
          title: "保存为图片",
          type: "png",
          lang: ["点击保存"]
        },
        series: [
          {
            type: "pie",
            radius: "60%",
            center: ["50%", "60%"],
            data: nutrition == [] ? this.nutrition : nutrition,
            label: {
              show: true,
              formatter: "{b}" + "\n\r" + "({d}%)"
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            itemStyle: {
              color: function(colors) {
                var colorList = ["#1E6FFF", "#FFCD00", "#FA5A35"];
                return colorList[colors.dataIndex];
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
      window.onresize = function() {
        myChart.resize();
      };
    },
    onclck() {
      var img = new Image();
      img.src = myChart.getDataURL({
        type: "png",
        pixelRatio: 1, //放大2倍
        backgroundColor: "#fff"
      });

      img.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL("image/png");

        var a = document.createElement("a");
        // 创建一个单击事件
        var event = new MouseEvent("click");
        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = "图片.png" || "下载图片名称";
        // 将生成的URL设置为a.href属性
        a.href = dataURL;
        // 触发a的单击事件
        a.dispatchEvent(event);
      };
    }
  }
};
</script>
<style scoped lang="less">
.piechart {
  &-icon {
    position: absolute;
    top: 40px;
    right: 10px;
    cursor: pointer;
    z-index: 100;
  }
}
#container {
  margin-top: 10px;
  width: 305px;
  height: 257px;
}
</style>
